<template>
  <div class="license-container">
    <div class="button-wrap">
      <el-button type="text" @click="addData" v-if="!disabled">增加银行卡信息</el-button>
    </div>
    <el-card class="box-card" v-for="(item, index) in dataList" :key="index">
      <div class="button-wrap">
        <el-button type="text" @click="remove(index)" style="color: red"
                   v-if="!disabled">删除</el-button>
      </div>
      <el-form
        label-width="130px"
        :model="item"
        :rules="rules"
        ref="form"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="银行账号" prop="accountNo">
              <el-input v-model.trim="item.accountNo" maxlength="50" placeholder="请输入银行账号"
                        :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属银行" prop="bankNo">
              <el-select v-model.trim="item.bankNo" style="width: 100%" placeholder="请选择所属银行"
                         :disabled="disabled">
                <el-option v-for="dict in dict.type.bank_type" :key="dict.value" :value="dict.value"
                           :label="dict.label">{{dict.label}}</el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开户行支行名称" prop="branchName">
              <el-input v-model.trim="item.branchName" maxlength="50" placeholder="请输入开户行支行名称"
                        :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="开户行支行地址" prop="branchAddr">
              <el-input v-model.trim="item.branchAddr" maxlength="200" placeholder="请输入开户行支行地址"
                        :disabled="disabled" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行附件" prop="fileInfoRequestList">
              <MyDtFileUpload
                v-model="item.fileInfoRequestList"
                :fileType="[]"
                :fileLimit="3"
                :fileSize="50"
                :disabled="disabled"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="银行卡照片" prop="fileList">
              <dt-upload v-model="item.fileList" :fileSize="50" :list-type="'picture-card'"
                         :disabled="disabled" @input="handleInput(item)" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// import { cloud } from '@/framework/utils/request'
import { recognition } from '@/api/information/index'
import { handleImage, handleFile } from '../../utils'
import MyDtFileUpload from '../dt-fileUpload'

export default {
  components: { MyDtFileUpload },
  dicts: ['bank_type'],
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {},
      rules: {
        accountNo: [{ required: true, trigger: 'blur', message: '请输入银行账号' }],
        bankNo: [{ required: true, trigger: 'change', message: '请选择所属银行' }],
        branchName: [{ required: true, trigger: 'blur', message: '请输入开户行支行名称' }],
        branchAddr: [{ required: true, trigger: 'blur', message: '请输入开户行支行地址' }],
        // fileInfoRequestList: [{ required: true, trigger: 'change', message: '请上传银行附件' }],
        fileList: [{ required: true, trigger: 'change', message: '请上传银行卡照片' }]
      },
      dataList: [
        {
          accountNo: '',
          bankNo: '',
          branchName: '',
          branchAddr: '',
          fileInfoRequestList: [],
          fileList: []
        }
      ],
      fileType: ['pdf', 'doc', 'docx'],
      dictList: []
    }
  },
  methods: {
    echoData(data) {
      this.dataList = data.map((item) => {
        item.fileInfoRequestList = item.fileInfoList.map((file) => {
          return handleFile(file)
        })
        item.fileList = handleImage(item)
        return item
      })
    },
    handleInput(item) {
      recognition({
        fileId: item.fileList[0].fileId,
        recognitionType: 4
      }).then((res) => {
        const { accountNo } = res.data
        item.accountNo = accountNo
      })
    },
    remove(i) {
      if (this.dataList.length <= 1) {
        this.$message.warning('至少保留一条数据')
        return
      }
      this.dataList.splice(i, 1)
    },
    addData() {
      const obj = {
        lincenseType: '',
        lincenseNumber: '',
        lincenseName: '',
        lincenseStartTime: '',
        lincenseEndTime: '',
        lincenseCard: '',
        remark: ''
      }
      this.dataList.push(obj)
    },
    init() {
      this.form = {}
      this.dataList = [
        {
          accountNo: '',
          bankNo: '',
          branchName: '',
          branchAddr: '',
          fileInfoRequestList: [],
          fileList: []
        }
      ]
      this.$refs.form.forEach((item) => {
        item.resetFields()
      })
    },
    submit() {
      return this.dataList
    },
    validate() {
      const arr = []
      this.$refs.form.forEach((item) => {
        item.validate((result) => {
          arr.push(result)
        })
      })

      return arr.every((item) => item)
    }
  }
}
</script>

<style lang="scss" scoped>
.license-container {
  .box-card {
    margin-bottom: 30px;
  }

  .button-wrap {
    text-align: right;
  }
  .upload-demo {
    text-align: left;
  }
  .upload-file-list .el-upload-list__item {
    border: 1px solid #e4e7ed;
    line-height: 2;
    margin-bottom: 10px;
    position: relative;
  }

  .upload-file-list .ele-upload-list__item-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: inherit;
  }
  ::v-deep .el-upload__tip {
    line-height: 16px;
  }
}
.photo-box {
  position: relative;
  // right: 5%;
  // top: 42%;
  // text-align: center;
  .el-image {
    width: 240px;
    min-height: 140px;
    background-color: #f5f7fa;
  }
  .image-slot i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
  }
}
</style>
